<template>
	<view class="container">
		<!-- 头部导航栏 -->
		<view class="header">
			<view class="header-left" @click="goBack">
				<uni-icons type="back" size="24" color="#333"></uni-icons>
			</view>
			<view class="header-title">添加地址</view>
		</view>

		<!-- 地址编辑表单 -->
		<view class="address-form">
			<view class="form-item">
				<view class="label">收货人姓名:</view>
				<input type="text" v-model="address.receiverName" placeholder="请输入收货人姓名" />
			</view>
			<view class="form-item">
				<view class="label">手机号码:</view>
				<input type="text" v-model="address.receiverMobile" placeholder="请输入手机号码" />
			</view>
			<view class="form-item">
				<view class="label">所在地区:</view>
				<input type="text" v-model="address.location" placeholder="请输入所在地区" />
			</view>
			<view class="form-item">
				<view class="label">详细地址:</view>
				<input type="text" v-model="address.detailedAddress" placeholder="请输入详细地址" />
			</view>
		</view>

		<!-- 提交按钮 -->
		<view class="submit-btn" @click="submitAddress">
			<text>添加地址</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 地址信息
				address: {
					receiverName: '',
					receiverMobile: '',
					location: '',
					detailedAddress: '',
					isDefault: 0, // 0: 非默认, 1: 默认
					userId: null // 从接口获取
				}
			};
		},
		async onLoad() {
			// 获取用户ID
			await this.getUserId();
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			// 获取用户ID
			async getUserId() {
				try {
					const token = uni.getStorageSync('token');
					const res = await uni.request({
						url: 'http://localhost:8080/system/user/profile',
						method: 'GET',
						header: {
							'Content-Type': 'application/json',
							'Authorization': token
						}
					});
					if (res.statusCode === 200 && res.data.code === 200) {
						this.address.userId = res.data.data.userId;
					} else {
						uni.showToast({
							title: '获取用户信息失败',
							icon: 'none'
						});
					}
				} catch (error) {
					uni.showToast({
						title: '网络错误',
						icon: 'none'
					});
				}
			},
			// 提交地址
			async submitAddress() {
				try {
					const token = uni.getStorageSync('token');
					const res = await uni.request({
						url: 'http://localhost:8080/address/address',
						method: 'POST',
						header: {
							'Content-Type': 'application/json',
							'Authorization': token
						},
						data: this.address
					});
					if (res.statusCode === 200 && res.data.code === 200) {
						uni.showToast({
							title: '添加成功',
							icon: 'success'
						});
						uni.navigateBack();
					} else {
						uni.showToast({
							title: '添加失败: ' + res.data.msg,
							icon: 'none'
						});
					}
				} catch (error) {
					uni.showToast({
						title: '网络错误',
						icon: 'none'
					});
				}
			}
		}
	};
</script>
<style>
	.container {
		background-color: #f8f8f8;
		color: #333;
		font-size: 14px;
	}

	/* 头部导航栏 */
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 15px;
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}

	.header-left {
		display: flex;
		align-items: center;
	}

	.header-title {
		font-size: 16px;
		font-weight: bold;
		flex: 1;
		text-align: center;
	}

	/* 地址编辑表单 */
	.address-form {
		padding: 15px;
		background-color: #fff;
		border-radius: 8px;
		margin: 15px;
	}

	.form-item {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}

	.label {
		width: 100px;
		font-size: 14px;
		color: #666;
		font-weight: 500;
	}

	input[type="text"] {
		flex: 1;
		border: 1px solid #ddd;
		padding: 10px;
		border-radius: 4px;
		outline: none;
	}

	/* 提交按钮 */
	.submit-btn {
		position: fixed;
		bottom: 20px;
		left: 20px;
		right: 20px;
		background-color: #e44d26;
		color: #fff;
		text-align: center;
		padding: 12px;
		border-radius: 5px;
		font-size: 16px;
	}
</style>
